<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="" method="">
    <!-- 正则:pattern title="密码格式错误" 错误时提示-->
   密码 <input type="text" pattern="[0-9a-z]{6,12}" title="密码格式错误"/>
    <input type="submit"/>
</form>

<br/>
<br/>

<input type="text" list="girltype"/>

<!--选项列表 把input list属性设置为datalist的id-->
<datalist id="girltype">
    <option value="辣妹子"></option>
    <option value="萌妹子"></option>
    <option value="女汉子"></option>
    <option value="汉字"></option>
    <option value="萝莉"></option>
    <option value="傻狍子"></option>
</datalist>


<!--表单-->
<!--oninput是用户操作input时 执行(脚本)-->
<form action="" oninput="o.value = r.value">
    <input type="range" name="r"/>
    <output name="o">0</output>
</form>

</body>
</html>